<template>
  <div>
    <div class="bigLogo">
      <img class="logoImg" src="https://tse1-mm.cn.bing.net/th/id/R-C.1cfe9bd17f087d7783660166e1fd35a9?rik=LYxWKA6ypei7aQ&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2fde14e5af558f92ea681f2368526b4a7e&ehk=O99Nyd08ICwlnwKU4u2kwWRy3X1PzmODeTywauErEOI%3d&risl=&pid=ImgRaw&r=0" alt="">
      <div class="middleTitle">
        <div class="h1Title">我们是一个开放的求职社区</div>
        <div class="content">
          每一位校友都在分享经验，共同参与社区建设，维护社区秩序。
          如果你和我们一样有分享欲，或者是有就业问题，欢迎加入我们。
        </div>
      </div>
      <div class="footerBar">
        <div class="barBox" @click="toTalk">
          <i class="iconfont icon-wodewenda" style="color: #59a9de;"></i>
          <div class="barRightContent">
            <div class="barTitle">问答</div>
            <div class="barContent">学习和分享求职知识</div>
          </div>
        </div>
        <div class="barBox" @click="toJob">
          <i class="iconfont icon-qiuzhiyixiang" style="color: #59a9de;"></i>
          <div class="barRightContent">
            <div class="barTitle">求职</div>
            <div class="barContent">查看和发布职位信息</div>
          </div>
        </div>
        <div class="barBox" @click="toResume">
          <i class="iconfont icon-toujianli" style="color: #59a9de;"></i>
          <div class="barRightContent">
            <div class="barTitle">简历</div>
            <div class="barContent">完善简历，快人一步</div>
          </div>
        </div>
        <div class="barBox" @click="toProfile">
          <i class="iconfont icon-shequ" style="color: #59a9de;"></i>
          <div class="barRightContent">
            <div class="barTitle">社区</div>
            <div class="barContent">管理个人社区资料</div>
          </div>
        </div>
      </div>
    </div>
    <div class="topContainer">
      <!--swiper区域-->
      <el-card style="margin-right:20px;">
        <div class="barTitle">
          热门公司
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div @click="toCompany(item.id)" class="swiper-slide" v-for="item in swiperData" :key="item.id"><img :src="item.avatarUrl" alt=""></div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- 如果需要滚动条 -->
          <!--    <div class="swiper-scrollbar"></div>-->
        </div>
      </el-card>
      <el-card style="height:300px;">
        <el-date-picker
          v-model="todayTime"
          type="date"
          placeholder="选择日期"
          readonly>
        </el-date-picker>
        <div class="quickBar">
          快捷导航
        </div>
        <div class="submit" @click="toEdit">
          发布文章
        </div>
        <div class="submit" @click="toResume">
          生成简历
        </div>
        <div class="submit" @click="toSubmitJob">
          发布岗位
        </div>
      </el-card>
    </div>
    <div class="contentBox">
      <div class="barTitle">精彩内容</div>
      <div class="toEdit" style="margin-bottom:10px;" @click="toEdit">
        <p>
          <i class="iconfont icon-wenbenbianji"></i>
          有什么想和大家分享的，去讨论区发布吧~
        </p>
      </div>
      <Recommend :recommendList="recommendList" />
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import Recommend from '../components/Recommend.vue'
export default {
  components: { Recommend },
  data () {
    return {
      activeTab: 'first',
      swiperData: [],
      titleList: ['推荐', '资讯', '关注', '热榜'],
      choose: 0,
      recommendList: []
    }
  },
  mounted () {
  },
  methods: {
    toSubmitJob () {
      this.$router.push('/submitJob')
    },
    toProfile () {
      this.$router.push('/profile/home')
    },
    toResume () {
      this.$router.push('/resume')
    },
    toJob () {
      this.$router.push('/job')
    },
    toTalk () {
      this.$router.push('/discuss')
    },
    toEdit () {
      this.$router.push('/edit')
    },
    toCompany (id) {
      this.$router.push(`/company/${id}`)
    },
    getTime () {
      this.todayTime = Date.now()
    },
    async getRecommendList () {
      const res = await this.$http.get('/moment/recommendList/list')
      this.recommendList = res.data
    },
    async getSwiperUrl () {
      const result = await this.$http.get('/swiper')
      this.swiperData = result.data
      this.$nextTick(() => {
        // eslint-disable-next-line no-new
        new Swiper('.swiper-container', {
          loop: true,
          // 如果需要分页器
          pagination: '.swiper-pagination',
          // 如果需要前进后退按钮
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          paginationClickable: true,
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, // 修改swiper的父元素时，自动初始化swiper
          // 如果需要滚动条
          // scrollbar: '.swiper-scrollbar',
          // 如果需要自动切换海报
          autoplay: 1500
        })
      })
    },
    changeChoose (index) {
      this.choose = index
    }
  },
  created () {
    this.$store.commit('setChoose', 'home')
    this.getSwiperUrl()
    this.getTime()
    this.getRecommendList()
  }
}
</script>

<style scoped lang="less">
.barTitle {
  font-size: 24px;
  font-weight: 500;
  padding: 10px 0;
}
.bigLogo {
  position: relative;
  margin-bottom: 50px;
  .logoImg {
    width: 100%;
    height: 300px;
  }
  .middleTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    .h1Title {
      color: #6a9af1;
      font-weight: 500;
      font-size: 40px;
      margin-bottom: 15px;
    }
    .content {
      font-weight: 400;
      color: white;
      font-size: 20px;
    }
  }
.footerBar {
  box-sizing: border-box;
  width: 100%;
  padding: 0 100px;
  position: absolute;
  bottom: -40px;
  display: flex;
  justify-content: space-around;
  .barBox {
    i {
      font-size: 32px;
      margin-right: 20px;
    }
    cursor: pointer;
    display: flex;
    height: 90px;
    width: 260px;
    background-color: white;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    img {
      width: 36px;
      height: 32px;
      margin-right: 20px;
    }
    .barRightContent {
      display: flex;
      flex-direction: column;
      .barTitle {
        color: black;
        font-size: 24px;
      }
      .barContent {
        color: rgb(108, 117, 125);
        font-size: 16px;
        margin-top: 15px;
      }
    }
  }
}
}
.quickBar {
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
}
.quickBar::after {
  background: #5a9cf8;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: 22px;
  width: 32px;
}
.submit {
  margin: 10px 0;
  height: 50px;
  background-color: #5a9cf8;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  font-size: 24px;
  font-weight: 1000;
  border-radius: 5px;
  cursor: pointer;
}
.topContainer {
  display: flex;
  padding: 15px 100px;
}
.swiper-container{
  height: 500px;
  width: 900px;
  margin-right: 0;
  margin-left: 0;
}
.swiper-slide{
  cursor: pointer;
  width:900px;
  height: 100%;
  background-color: #42b983;
  text-align: center;
  line-height: 500px;
}
.swiper-slide img{
  width: 100%;
  height: 100%;
}
.contentBox{
  background-color: #fff;
  padding: 0 200px;
}
.titleList{
  display: flex;
}
.leftBox{
  width: 700px;
}
.titleList li{
  height: 48px;
  line-height: 48px;
  width: 32px;
  color: #999aaa;
  cursor: pointer;
}
.choose{
  color: #000 !important;
  font-weight: 700;
}
.choose::after{
  content: '';
  display: block;
  width: 32px;
  border-bottom: 1px solid #000;
}
.move{
  margin-left: auto;
  margin-right: 0px;
  width: 48px !important;
}
.marginList{
  margin-right: 56px;
}
.toEdit{
  cursor: pointer;
  height: 48px;
  background-color: rgba(39,124,204,.03);;
  line-height: 48px;
  font-weight: 400;
  color: #277ccc;
  padding-left: 10px;
}
</style>
